import React, { FC, useState } from 'react'
import { AlertProps, DISPLAY_NAME_ALERT, getAlertClassNames } from './config'
import classNames from 'classnames'
import Icon from '../Icon'
import Transition from '../Transition'

export const Alert: FC<AlertProps> = props => {
  const [hide, setHide] = useState(false)
  const { title, description, onClose, closable } = props

  const alertClasses = getAlertClassNames(props)

  const titleClass = classNames('alert-title', {
    'bold-title': description,
  })

  const handleClose = (e: React.MouseEvent) => {
    if (onClose) {
      onClose()
    }
    setHide(true)
  }

  return (
    <Transition in={!hide} timeout={300} animation="zoom-in-top">
      <div className={alertClasses}>
        <span className={titleClass}>{title}</span>
        {description && <p className="alert-desc">{description}</p>}
        {closable && (
          <span className="alert-close" onClick={handleClose}>
            <Icon icon="times" />
          </span>
        )}
      </div>
    </Transition>
  )
}
Alert.displayName = DISPLAY_NAME_ALERT
Alert.defaultProps = {
  type: 'default',
  closable: true,
}
export default Alert
